<template>
  <div class="wrapper">
    {{ obj.output }}
    <span class="typed-cursor">|</span>
  </div>
</template>

<script>
import EasyTyper from "easy-typer-js";
export default {
  name: "EasyTyperDemo",
  components: {},
  props: {},
  data() {
    return {
      //  配置
      obj: {
        // 输出内容,使用MVVM框架时直接使用 { obj.output }
        output: "",
        // 全局控制是否终止
        isEnd: false,
        // 打字速度
        speed: 80,
        // 完整输出完一句话后，睡眠一定时间后触发回滚事件
        sleep: 2000,
        // 下一次的行为 'roolback', 'normal', 'custom'
        type: "normal",
        // 回滚速度
        backSpeed: 40,
        // 单次的回滚（优先级高于type）
        singleBack: false,
        // 整个生命周期运行完毕后，句子是否暂停显示（仅在回滚模式下生效）
        sentencePause: false,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    initTyped(input, fn, hooks) {
      const obj = this.obj;
      const typed = new EasyTyper(
        obj,
        input,
        () => {
          this.fetchData();
        },
        hooks
      );
    },
    fetchData() {
      fetch("https://v1.hitokoto.cn")
        .then((res) => res.json())
        .then((data) => {
          this.initTyped(data.hitokoto);
        });
    },
  },
  created() {},
  mounted() {
    this.fetchData();
    return;
    const typed = new EasyTyper(
      // 配置对象
      this.obj,
      // 内容输入
      "Hello World!",
      () => {
        // 完成一次output输出后的回调函数
        console.log("done");
      },
      () => {
        // 钩子 钩在每一帧将要完成的时间片段上
        console.log("hooks");
      }
    );
  },
};
</script>
<style scoped>
.wrapper {
  font-weight: bolder;
  font-size: 36px;
}

.typed-cursor {
  margin-left: 10px;
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
